<%@page contentType="text/html;charset=UTF-8"%>
<!doctype html>
<html>
<head>
<%@ include file="/include/taglibs.jsp"%>
<%@ include file="/include/meta.jsp"%>
<script src="${ctx}/plug/jtopo/topotools/require/jtopo-0.4.8-min.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/plug/jtopo/topotools/css/index.css"/>
<script src="${ctx}/plug/jtopo/topotools/require/Map.js"></script>
<script src="${ctx}/plug/jtopo/topotools/require/Math.uuid.js"></script>
<script src="${ctx}/plug/jtopo/topotools/js/tools-core2.js"></script>
<script>
	var menuJson=[];
	var g_Ids,sys_name;
    var RENDER_MAP = new Map_();
    var leftX = 47;
    $(document).ready(function () {
    	//getImgList();
        
        getProjectList();
        httpPrimitiveClass();
    });
    
    function prosubmit(){
    	var projectName=$.trim($('input[name="projectName"]').val());
    	var projectDes=$.trim($('#projectDes').val());
    	//var indexPage=$.trim($('input[name="indexPage"]').val());
    	var setData={};
    	setData['tsbProject.projectName']=projectName;
    	setData['tsbProject.projectDescription']=projectDes;
    	//setData['tsbProject.indexPage']=indexPage;
    	data(getUrl('tsbProject','Add'),setData,'json',null);
    }
    
    function updatePro(){
    	var id=$.trim($('input[name="uid"]').val());
    	var projectName=$.trim($('input[name="uprojectName"]').val());
    	var projectDes=$.trim($('#uprojectDes').val());
    	var indexPage=$.trim($('input[name="uindexPage"]').val());
    	var pageNode=$("#indexPageOPtion").val();
    	var setData={};
    	setData['tsbProject.id']=id;
    	setData['tsbProject.projectName']=projectName;
    	setData['tsbProject.projectDescription']=projectDes;
    	setData['tsbProject.indexPage']=indexPage;
    	setData['tsbProject.pageNode']=pageNode;
    	data(getUrl('tsbProject','Update'),setData,'json',null);
    }
    
    function Imgsubmit(){
    	var primitiveName=$.trim($('input[name="primitiveName"]').val());
    	var myDate = new Date();	
    	var dateStr=myDate.getFullYear()+"-"+myDate.getMonth()+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds();
    	var primitiveNodeType=$('select[name="primitiveNodeType"]').val();
    	var imgWidth=$.trim($('input[name="imgWidth"]').val());
    	var imgHeight=$.trim($('input[name="imgHeight"]').val());
    	var classId=$("#primitiveClass").val();
    	var setData={};
    	setData['tsbPrimitive.primitiveName']=primitiveName;
    	setData['tsbPrimitive.classId']=classId;
    	setData['tsbPrimitive.updateTime']=dateStr;
    	setData['tsbPrimitive.fileName']=sys_name;
    	setData['tsbPrimitive.primitiveNodeType']=primitiveNodeType;
    	setData['tsbPrimitive.imgWidth']=imgWidth;
    	setData['tsbPrimitive.imgHeight']=imgHeight;
    	data(getUrl('tsbPrimitive','Add_HasFiles'),setData,'json',updateFun);
    }
    
    function getPrimitiveClass(){
    	data('${ctx}'+actionUrl('/sys/', 'tsbPrimitiveClass','ComboBox'),null,'json',function(d){
    		option="";
    		for(var i=0;i<d.length;i++){
    			var idStr=d[i].id;
    			var classStr=d[i].text;
    			option+="<option value=\""+idStr+"\">"+classStr+"</option>";
    		}
    		$("#primitiveClass").html(option);
    	});
    }
    
    function updateFun(d){
    	if(d.info=='新增成功!'){
    		var setData={'ids':g_Ids,'fileid':d.fileid};
    		data(getUrl('syFile','Update'),setData,'json',null);
    	}else if(d.info=='删除成功!'){
    		var setData={'fileids':d.fileids};
    		data(getUrl('syFile','Delete_ByFileIds'),setData,'json',null);
    	}
    }
    function submitUploadForm(){
    	$("#i_sy_tsbPrimitive_datagrid_upload_dialog_form").form('submit',{
    		success:function(d){
    			d=$.parseJSON(d);
    			g_Ids=d.syFiles[0].id;
    			sys_name=d.syFiles[0].sysname;
    			log(d.info);
    		}
    	});
    }
    function getProjectList(){
    	data('${ctx}'+actionUrl('/sys/', 'tsbProject','List_All'),null,'json',getlist);
    }
    function getlist(d){
    	 
    	var html="",option="";
    	var i;
    	for(i=0;i<d.length;i++){
    		var id=d[i].id;
    		var text=d[i].projectName;
    		if(i==0){
				option+='<option value="0">无</option>';
			}
    		option+="<option value=\""+id+"\">"+text+"</option>";
    		html="<div id=\"p"+id+"\"></div>";
    		$("#prodiv").append(html);
    		$('#p'+id).panel({
        	    title:text,
                collapsible:true,
                width:170,
                tools: [{   
                    iconCls:'icon-edit',
                    handler:function(){
                    	var str=$(this).parent().parent().siblings().attr("id");
                    	str=str.substring(1);
                    	getProjectJson(str);
                    	$('#updateProjectDlg').dialog('open');
                    }   
                }]
        	});
    		var setData={};
    		setData["tsbProjectPage.parentId"]=id;
    		data('${ctx}'+actionUrl('/sys/', 'tsbProjectPage','Get_ByObj'),setData,'json',function(d){
    			htmlStr="";
    			htmlStr+="<ul>";
    			var parentId;
    			for(var a=0;a<d.length;a++){
    				var idS=d[a].id;
    				parentId=d[a].parentId;
    				htmlStr+="<li><div><a type='nav_foot' onclick='clickProItem("+idS+")'"
	    			+" href='javascript:void(0);'><span class='icon-standard-report-key'>"
	    			+"&nbsp;&nbsp;&nbsp;&nbsp;</span><span class='nav'>"+d[a].pageName+"</span></a></div></li>";
    			}
    			htmlStr+="</ul>";
    			//alert(parentId);
    			
    			$("#p"+parentId).html(htmlStr);
    		});
    		
    	}
    	$("#parentNode").html(option);
    }
    function getProjectJson(id){
    	var setData={};
    	setData["id"]=id;
	    data('${ctx}'+actionUrl('/sys/', 'tsbProject','Get_ById'),setData,'json',function(d){
	    	//alert(JSON.stringify(d));
	    	$('input[name="uid"]').val(d.id);
	    	readOneProject(d.id,d.pageNode);
	    	$('input[name="uprojectName"]').val(d.projectName);
	    	$('#uprojectDes').val(d.projectDescription);
	    	$('input[name="uindexPage"]').val(d.indexPage);
	    });
    }
    
    function readOneProject(id,pageid){
    	var setData={};
    	setData["tsbProjectPage.parentId"]=id;
    	data('${ctx}'+actionUrl('/sys/', 'tsbProjectPage','Get_ByObj'),setData,'json',function(d){
    		var option="";
    		for(var i=0;i<d.length;i++){
    			if(i==0){
    				option+='<option value="0">无</option>';
    			}
    			option+="<option value=\""+d[i].id+"\">"+d[i].pageName+"</option>";
    		}
    		$("#indexPageOPtion").html(option);
    		$("#indexPageOPtion").val(pageid);
    	});
    	//$("#indexPageOPtion").text(pageName);
    	 
    }
    function getImgList(classId){
    	//var idata=[];
    	var setData={},a=0;
    	setData["tsbPrimitive.classId"]=classId;
    	data('${ctx}'+actionUrl('/sys/', 'tsbPrimitive','Get_ByObj'),setData,'json',function(d){
    		for(var i=0;i<d.length;i++){
    			var obj={};
    			var listStr={};
    			obj["fileid"]="tsbPrimitive-"+d[i].id;
	    		listStr["c_Id"]=d[i].id;
	    		listStr["nodeElementType"]=d[i].primitiveNodeType;
	    		listStr["c_name"]=d[i].primitiveName;
	    		if(d[i].primitiveNodeType=="textNode"){
	    			listStr["c_imagePath"]="";
	    		}else{
	    			listStr["c_imagePath"]=top.sysPath+"/fileupload/"+d[i].fileName;
	    		}
	    		listStr["nodeField"]=d[i].nodeField;
	    		listStr["c_sizeW"]=parseInt(d[i].imgWidth);
	    		listStr["c_sizeH"]=parseInt(d[i].imgHeight);
	    		listStr["d_name"]=d[i].primitiveName;
	    		listStr["d_sizeW"]=parseInt(d[i].imgWidth);
	    		listStr["d_sizeH"]=parseInt(d[i].imgHeight);
	    		listStr["elementEvent"]=parseInt(d[i].elementEvent);
	    		menuJson.push(listStr);
	    		a++;
    		}
    		$("#leftCanvas__"+classId).attr("height",a*70);
    		loadCanvas(classId);
    		//alert(JSON.stringify(menuJson));
    	});
    }
    function loadCanvas(classId){
    	var canvas = document.getElementById('leftCanvas__'+classId);
        var stage = new JTopo.Stage(canvas);
        var scene = new JTopo.Scene();
        scene.mode = 'select';
        scene.areaSelect = false;
        stage.add(scene);
        for (var i = 0; i < menuJson.length; i++) {
            var jsonNode = menuJson[i];
            var node = createModel(jsonNode);
            RENDER_MAP.put(jsonNode.c_Id, jsonNode);
            var s = 10 + i * 65;
            if (s == 10) {
                s = 18;
            }
            node.setLocation(leftX, s);
            scene.add(node);
        }
    }
    function submitdata(){
    	var setData={};
    	var pageName=$("input[name='pageName']").val();
    	var dataJson=document.getElementById('theJson').value;
    	var myDate = new Date();	
    	var dateStr=myDate.getFullYear()+"-"+myDate.getMonth()+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds();
    	var parentId=$("#parentNode").val();
    	var pId=$("#pId").val();
    	var nodeId=$("#LinkNodeId").val();
    	setData["tsbProjectPage.parentId"]=parentId;
    	setData["tsbProjectPage.pageName"]=pageName;
    	setData["tsbProjectPage.pageContent"]=dataJson;
    	setData["tsbProjectPage.updateTime"]=dateStr;
    	setData["tsbProjectPage.pid"]=pId;
    	setData["tsbProjectPage.nodeId"]=nodeId;
    	if(canvasFram.window.flag==0){
    		data(getUrl('tsbProjectPage','Add'),setData,'json',null);
    	}else{
    		setData["tsbProjectPage.id"]=$("input[name='id']").val();
    		data(getUrl('tsbProjectPage','Update'),setData,'json',null);
    	}
    }
    
    function clickProItem(id){
    	$("#canvasFram").attr("src","${ctx}/plug/jtopo/canvasFram.jsp?proid="+id);
    }
    
    function selectChange(json){
    	var pId=$("#parentNode").val();
    	var setData={};
    	setData["tsbProjectPage.parentId"]=pId;
    	data(getUrl('tsbProjectPage','Get_ByObj'),setData,'json',function(d){
    		var option="";
    		for(var i=0;i<d.length;i++){
    			if(i==0){
    				option+='<option value="0">无</option>';
    			}
    			option+="<option value=\""+d[i].id+"\">"+d[i].pageName+"</option>"
    		}
    		$("#pId").html(option);
    		$("#LinkNodeId").html(option);
    		if(json!=null){
	    	 	$("#pId").val(json.pid);
	    	    $("#LinkNodeId").val(json.nodeId);
    		}
    	});
    	return true;
    }
    function addParentPage(json){
    	$("input[name='id']").val(json.id);
    	$("input[name='pageName']").val(json.pageName);
    	$("#parentNode").val(json.parentId);
    	selectChange(json);
    }
    function selectchNodeChange(){
    	var str=$("#indexPageOPtion").val();
    	$("input[name='uindexPage']").val("?id="+str);
    }
    
    function httpPrimitiveClass(){
    	data('${ctx}'+actionUrl('/sys/', 'tsbPrimitiveClass','ComboBox'),null,'json',function(d){
    		option="";
    		for(var i=0;i<d.length;i++){
    			var className=d[i].text;
    			var html='<div id="p'+className+'"><p>panel content.</p><p>panel content.</p></div>';
    			$("#primitiveMain").append(html);
    			$('#p'+className).panel({
            	    title:className,
                    collapsible:true,
                    width:125
            	});
    			var hcontent='<canvas width="125" height="0" id="leftCanvas__'+d[i].id+'"></canvas>';
    			$("#p"+className).html(hcontent);
    			getImgList(d[i].id);
    		}
    	});
    }
</script>
<style type="text/css">
.easyui-accordion ul li a {
	line-height: 24px;
}
a {
	color: Black;
	text-decoration: none;
	blr: expression(this.onFocus=this.blur ());
	outline: none
}
.panel ul {
	margin: 0px;
	padding: 10px;
}

.panel ul li,.easyui-accordion ul li {
	padding: 0px;
	list-style-type: none;
}
.panel-body ul li{height:30px;line-height:30px;}
.panel-body ul li a{display:block;width:100%;height:100%;}
</style>
</head>
<body class="easyui-layout">  
    <div data-options="region:'east',iconCls:'icon-reload',title:'图元列表',split:true,tools:[{
    	iconCls:'icon-add',
    	handler:function(){
    		getPrimitiveClass();
    		$('#addImgListDlg').dialog('open');
    	}
    }]" style="width:160px;" id="primitiveMain">
    	<!-- <canvas width='125' height='785' id='leftCanvas__'></canvas> -->
    </div>  
    <div data-options="region:'west',title:'组态工程',split:true,tools: [{   
        iconCls:'icon-add',   
        handler:function(){$('#addProjectDlg').dialog('open'); }   
    }]" style="width:200px;" id="prodiv">
    </div>  
    <div data-options="region:'center',title:'页面',tools: [{   
        iconCls:'icon-add',   
        handler:function(){document.getElementById('canvasFram').contentWindow.saveJson();$('#getjson').dialog('open'); }   
    }]" >
    	<iframe src="${ctx}/plug/jtopo/canvasFram.jsp" style="width:99%;height:95%;" name="canvasFram" id="canvasFram"></iframe>
    	<!-- <canvas width='1205' height='696' style="border:1px solid #808080" id='canvas__'></canvas>
		<div id="content"></div>
		<textarea id="jtopo_textfield" style="display:none;width: 60px;position: absolute;"
		          onkeydown="if(event.keyCode==13)this.blur();"></textarea>
		<ul id="contextmenu" style="display:none;font-size:12px">
		    <li><a>开始连线</a></li>
		    <li><a>设置成告警</a></li>
		    <li><a>清除告警</a></li>
		    <li><a>顺时针旋转</a></li>
		    <li><a>逆时针旋转</a></li>
		    <li><a>放大</a></li>
		    <li><a>缩小</a></li>
		    <li><a>删除该节点</a></li>
		</ul>
		
		<ul id="contextmenu2" style="display:none;font-size:12px">
		    <li><a>设置成红色</a></li>
		    <li><a>设置成蓝色</a></li>
		    <li><a>删除连线</a></li>
		</ul>
		
		<div id="jsonContext" style="width:700px;height:700px;display:none;font-size:12px">
		
		</div> -->
    </div>  
    <div id="getjson" class="easyui-dialog" title="页面数据" style="width:400px;height:300px;"  
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:[{
				text:'Save',
				handler:function(){
				 	//var jsons=eval(document.getElementById('theJson').value);
					//renderToPo(jsons); 
					submitdata();
				}
			}]">
		<div style="width:90%;height:90%;margin:0px auto;">
	    	<textarea id="theJson" style="width:90%;height:30%;display:none;"></textarea>
	    	<div style="margin:10px 0px;">
		    	<label>页面名称:</label>
		    	<input type="hidden" name="id" value="0"/>
		    	<input type="text" name="pageName" style="width:140px;"/>
	    	</div>
	    	<div style="margin:10px 0px;">
		    	<label>隶&nbsp;&nbsp;属 &nbsp;于:</label>
		    	<select id="parentNode" onchange="selectChange(null)">
		    		
		    	</select>
		    	<select id="pId">
		    		<option value="0">无</option>
		    	</select>
	    	</div>
	    	<div style="margin:10px 0px;">
		    	<label>链接节点:</label>
		    	<select id="LinkNodeId">
		    		<option value="0">无</option>
		    	</select>
	    	</div>
    	</div>
    </div>
    <div id="addProjectDlg" class="easyui-dialog" title="添加工程" style="width:400px;height:300px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:[{
     text:'保存',
     handler:function(){
     	alert('保存');
     	//$('#projectForm').form('submit');
     	prosubmit();
     }
     }]">
     	<div style="padding:10px 60px 20px 60px">
        <form id="projectForm" method="post">
            <table cellpadding="5">
                <tr>
                    <td>工程名称:</td>
                    <td><input class="easyui-validatebox" type="text" name="projectName" data-options="required:true" style="width:160px;"></input></td>
                </tr>
                <tr>
                    <td>工程描述:</td>
                    <td>
                    	<textarea id="projectDes" style="width:160px;height:100px;resize:none;"></textarea>
                    </td>
                </tr>
                <!-- <tr>
                    <td>首页地址:</td>
                    <td>
                    	<input class="easyui-validatebox" type="text" name="indexPage"  style="width:160px;"></input>
                    </td>
                </tr> -->
            </table>
        </form>
        </div>
     </div>
     <div id="addImgListDlg" class="easyui-dialog" title="添加图元列表" style="width:400px;height:300px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:[{
     text:'保存',
     handler:function(){
     	//alert('保存');
     	Imgsubmit();
     	//$('#ImgListForm').form('submit');
     }
     }]">
		  <div style="padding:10px 60px 20px 60px">
		    <form id="ImgListForm">
		       <div>
			      <label>图元名称:</label>
	              <input class="easyui-validatebox" name="primitiveName"/>
               </div>
               <div>
			      <label>图元分类:</label>
	              <select id="primitiveClass">
	              	
	              </select>
               </div>
               <div>
			      <label>图片宽度:</label>
	              <input class="easyui-validatebox" name="imgWidth" value="25"/>
               </div>
               <div>
			      <label>图片高度:</label>
	              <input class="easyui-validatebox" name="imgHeight" value="25"/>
               </div>
               <div>
			      <label>图元类型:</label>
	              <select name="primitiveNodeType">
	              	<option value="node">node</option>
	              	<option value="textNode">textNode</option>
	              </select>
               </div>
		    </form>
		    <hr style="width:100%;height:1px;"/>
		    <form id="i_sy_tsbPrimitive_datagrid_upload_dialog_form" action='/doroodo/sys/syFile_Upload?fileid=' enctype="multipart/form-data" method="post" >
    			<input type="text" name="fileid"  style="display:none;"/>上传文件：<input type="file" name="fileGroup"></br><span style="color:red">注：由于服务器的空间有限，上传文件大小不能超过1G</span></br>
        		<input type="button" value="上传" onClick="submitUploadForm();" />
        	</form>
		  </div>
    </div>
    <div id="updateProjectDlg" class="easyui-dialog" title="添加工程" style="width:400px;height:300px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:[{
     text:'保存',
     handler:function(){
     	updatePro();
     }
     }]">
     	<div style="padding:10px 60px 20px 60px">
        <form id="uprojectForm" method="post">
        <input  type="hidden" name="uid"></input>
            <table cellpadding="5">
                <tr>
                    <td>工程名称:</td>
                    <td><input class="easyui-validatebox" type="text" name="uprojectName" data-options="required:true" style="width:160px;"></input></td>
                </tr>
                <tr>
                    <td>工程描述:</td>
                    <td>
                    	<textarea id="uprojectDes" style="width:160px;height:100px;resize:none;"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>首页节点:</td>
                    <td>
                    	<select id="indexPageOPtion" onchange="selectchNodeChange()">
                    	
                    	</select>
                    </td>
                </tr>
                <tr>
                    <td>首页地址:</td>
                    <td>
                    	<input class="easyui-validatebox" type="text" name="uindexPage" readonly="readonly" style="width:160px;"></input>
                    </td>
                </tr>
            </table>
        </form>
        </div>
     </div>
</body>  
</html>
